<template>
	<view>
		<view class="add">
			<view class="topTitle">
				<!-- <view class="cancle">取消</view> -->
				<view class="addReportTitle">新建单据</view>
				<uni-search-bar :radius="100" cancelButton="false" @confirm="search"></uni-search-bar>
				<view class="collapseBox">
					<uni-collapse class="collapseContent" accordion="true">
							<uni-collapse-item  title="最近使用">
								<view class="latestUse">
									<uni-grid :column="2" :show-border="false"  :square="false">
										<uni-grid-item v-for="(item,index) in latest" :key="index" style="width: 50%;">
											<view style="width: 100%;" @click="handleBills(item.url)">
												<icon-svg :style="{color: item.color, fontSize: item.size}" :icon-class="item.type" /></span>
												<text class="text">{{item.text}}</text>
											</view>
										</uni-grid-item>
									</uni-grid>
								</view>
							</uni-collapse-item>
							<uni-collapse-item title="翰智组" open showAnimation>
									<view class="latestUse">
										<uni-grid :column="2" :show-border="false"  :square="false">
											<uni-grid-item v-for="(item,index) in hanzhiGrop" :key="index" style="width: 50%;">
												<view style="width: 100%;" @click="handleBills(item.url)">
													<icon-svg :style="{color: item.color, fontSize: item.size}" :icon-class="item.type" /></span>
													<text class="text">{{item.text}}</text>
												</view>
											</uni-grid-item>
										</uni-grid>
									</view>
							</uni-collapse-item>
							<uni-collapse-item title="采购报销">
									
							</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</view>
		<!-- <cmd-bottom-nav :list="list" @click="btmNavBarHandle"/> -->
		<view class="btmBarNav">
			<view class="btmItem" 
				v-for="(item, index) in btmListNavData" :key="index"
				@click="btmNavBarHandle(item.pagePath)"
				>
				<uni-icons v-if="index == 0" class="icon" 
					color="#FF6F00" size="22" :type="item.icon"></uni-icons>
				<icon-svg v-if="index != 0" class="icon" 
					:icon-class="item.icon"></icon-svg>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
export default {
   components: {
		  cmdBottomNav,
		  uniSearchBar
		},
	 data() {
	 	return {
			// 底部导航：
	 		btmListNavData:[
				{
					"pagePath": "/pages/tabbar/home/home",
					"text": "扫一扫", 
					"icon": "scan",
				},
				{
					"pagePath": "/pages/add/handInputBill/handInputBill",
					"text": "手录发票", 
					"icon": "shenqing",
				},
				{
					"pagePath": "/pages/add/personTicket/personTicket",
					"text": "个人票夹", 
					"icon": "yishenpiliebiao-",
				},
				{
					"pagePath": "/pages/add/curRecod/curRecod",
					"text": "随手记", 
					"icon": "jilu",
				}
			],
			// 最近使用
			latest: [
				{
					'type': 'youxiang',
					'color': '#FF6F00',
					'size': '18',
					'text': '借款单',
					'url': '/pages/add/loanBill/loanBill'
				},
				{
					'type': 'wenti-shuben',
					'color': '#FF6F00',
					'size': '18',
					'text': '还款单',
					'url': '/pages/add/repayBill/repayBill'
				},
				{
					'type': 'gongwenbao',
					'color': '#FF6F00',
					'size': '18',
					'text': '出差申请单',
					'url': '/pages/add/travelApplyBill/travelApplyBill'
				},
				{
					'type': 'gongwenbao',
					'color': '#FF6F00',
					'size': '18',
					'text': '通用申请单',
					'url': '/pages/add/currencyApplyBill/currencyApplyBill'
				}
			],
			hanzhiGrop: [
				{
					'type': 'feiji1',
					'color': '#FF6F00',
					'size': '18',
					'text': '借款单',
					'url': '/pages/add/loanBill/loanBill'
				},
				{
					'type': 'wenti-shuben',
					'color': '#FF6F00',
					'size': '18',
					'text': '还款单',
					'url': '/pages/add/repayBill/repayBill'
				},
				{
					'type': 'gongwenbao',
					'color': '#FF6F00',
					'size': '18',
					'text': '出差申请单',
					'url': '/pages/add/travelApplyBill/travelApplyBill'
				},
				{
					'type': 'gongwenbao',
					'color': '#FF6F00',
					'size': '18',
					'text': '通用申请单',
					'url': '/pages/add/currencyAccount/waitForPay'
				},
				{
					'type': 'jiekuanmingxi',
					'color': '#FF6F00',
					'size': '18',
					'text': '差旅费报销单',
					'url': '/pages/add/travelFreeBill/add/index'
				},
				{
					'type': 'shenqing',
					'color': '#FF6F00',
					'size': '18',
					'text': '通用报销单',
					'url': '/pages/add/currencyAccount/waitForPay'
				},
			]
	 	}
	},
	methods: {
		btmNavBarHandle (url) {
			this.handleBills(url)
		},
		handleBills(url) {
			uni.navigateTo({
				url,
			})
		}
	},
}
</script>

<style lang="scss" scoped>
	@import "@/pages/add/add.scss";
	.add{
		font-size: 32rpx;
		.topTitle{
			width: 100%;height: 40rpx;
			.cancle{float: left;margin-left: 20rpx;}
			.addReportTitle{
				width: 100%;
				text-align: center;
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
				.uni-searchbar__box{
					border-color: #FFFFFF;
				}
			}
			.collapseBox{
				width: 100%;
				height: auto;
				.collapseContent{
					.uni-collapse-cell{
						border-color: #e9e9e9;
						.uni-collapse-cell__title{
							.uni-collapse-cell__title-text{
								font-size: 16px!important;
							}
						}
					}
					.uni-collapse-cell--open{
						background-color: #fff;
					}
					.latestUse{
						.uni-grid-item{
							height: 70rpx;
							line-height: 50rpx;
						}
						.icons{
							margin-left: 12px;;
						}
						.text{margin-left: 12px;}
					}
				}
			}
		}
	}
	.btmBarNav{
		width: 100%;
		height: 110rpx;
		@include posFixedBtm();
		overflow: hidden;
		border-top: 1px solid #ccc;
		padding-top: 10px;
		.btmItem{
			width: 25%;
			text-align: center;
			float: left;
			.icon{
				font-size: 22px;
				color: $themeColor;
			}
			.text{
				@include divH(40rpx);
			}
		}
	}
</style>
